<template>
  <div style="background-color: #efefef;height:100vh;">
    <div>
      <button class="goBack" @click="goBack">
        <van-icon name="arrow-left" />
      </button>
      <div class="shpcar">
        订单列表
      </div>
    </div>
    <div v-if="hasLocalStorageItems">
      <div v-for="item in items" :key="item.id" class="caritem">
        <!-- <img :src="item.thumb" alt="商品图片" style="width: 100px; height: 100px;" />
        <p>{{ item.title }} - ¥{{ item.price * item.num }}</p> -->
        <van-card :num="item.num" :price="item.price" :desc="item.desc" :title="item.title" :thumb="item.thumb"
          class="goodscard" />
      </div>
      <div class="caritem">
        <van-button type="primary" size="large" class="pay" @click="onSubmit" style="width: 94%;;background-color: #ff5777;border: none;margin: 10rem;border-radius: 20rem;">去支付</van-button>
      </div>
    </div>
    <div v-if="!hasLocalStorageItems" style="background-color: white;padding-bottom: 30rem;">
      <img data-v-1b56efa6=""
        src="https://s10.mogucdn.com/mlcdn/c45406/241128_29a2c7akki2kihbhbfajga143k7h1_714x180.png"
        style="width: 100%; height: auto; visibility: inherit; display: inherit;">
      <div class="meili-all-base-page-error">
        <div>
          <van-image src="https://s10.mogucdn.com/new1/v1/bmisc/b22401c122fbedee3b1f5d708127e9f0/194500731154.png"/>
          <div class="title" style="text-align: center;">还没有相关订单哦</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// import { useRouter } from 'vue-router';
import { Icon as VanIcon, Toast } from 'vant';
const route = useRoute();
const router = useRouter(); // 使用 useRouter 钩子
const items = ref([]);
const goBack = () => {
  router.push('/mine'); // 使用 router 对象的 go 方法返回上一页
};
// 计算属性，判断本地存储是否有商品信息
const hasLocalStorageItems = computed(() => {
  const itemsString = localStorage.getItem('selectedItems');
  return itemsString ? JSON.parse(itemsString).length > 0 : false;
});
// 解析传递的商品信息
const parsedItems = computed(() => {
  try {
    const itemsString = route.query.items;
    if (itemsString) {
      return JSON.parse(decodeURIComponent(itemsString));
    }
    return [];
  } catch (e) {
    Toast('暂无订单');
    return [];
  }
});
const onSubmit = () => {
  router.push({ path: '/orderCon' });
};
// 从本地存储获取商品信息
const localStorageItems = () => {
  const itemsString = localStorage.getItem('selectedItems');
  if (itemsString) {
    return JSON.parse(itemsString);
  }
  return [];
};
// 在组件加载时解析商品信息
onMounted(() => {
  // 首先检查路由参数
  if (parsedItems.value.length > 0) {
    items.value = parsedItems.value;
  } else {
    // 如果路由参数没有商品信息，则从本地存储获取
    items.value = localStorageItems();
  }
});
</script>

<style lang="less" scoped>
.goBack {
  position: absolute;
  top: 15px;
  /* 调整为合适的像素值 */
  left: 20px;
  /* 调整为合适的像素值 */
  background-color: rgba(255, 255, 255, 0);
  border: none;
  font-size: 14px;
  /* 调整为合适的像素值 */
}

.shpcar {
  width: 100%;
  height: 44rem;
  text-align: center;
  font-size: 20rem;
  line-height: 44rem;
  border-bottom: 1rem solid #d1cdcd;
  color: #6f6f6f;
}
</style>
